<template>
    <van-checkbox class="mycheckbox" :name="name" v-model="valueCheckbox" shape="square" @change="setStatus" :disabled="disabled">
        <slot/>
    </van-checkbox>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,watch } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {Checkbox as vanCheckbox} from 'vant'

export default {
    components:{
       vanCheckbox
    },
    props:{
        modelValue:{
            type:String,
            default:''
        },
        name:'',
        disabled:{
            type:Boolean,
            default:false
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            ddd:false,
            valueCheckbox:''
        })
       watch(()=>props.modelValue,(n,o)=>{
               state.valueCheckbox = props.modelValue
        })
        const setStatus = checked=>{
            //context.emit('update:modelValue', checked)
            context.emit('onChange', checked)
        }

        return{
            ...toRefs(state),
            setStatus
        }
    }
}
</script>

<style lang="scss">
    .mycheckbox {
        .van-icon{
           width: 35px;
            height: 35px;
            background: url(/images/cb2.png) left top no-repeat;
            background-size: 100% 100%;
            border: 0;
            &::before{
                content: none;
            }
        }
        .van-checkbox__icon--checked{
            .van-icon{
                background-image: url(/images/cb1.png);
            }
        }
        
    }
</style>